<template>
	<view>
		<view class="user-card flex-row-between">
			<view class="flex-row-start">
				<image class="head-img" :src="avatar == '' ? '../../static/imgs/tab_mine.png' : avatar"></image>
				<view>
					<view class="name">{{ realName }}</view>
					<view class="company">{{ tenantName }} {{ postName }}</view>
				</view>
			</view>
			<!-- <image class="arrow" src='../../static/imgs/icon_gray_arrow_right.png'></image> -->
		</view>

		<view class="title-ul">
			<view class="title-li" @tap="goChangeUserInfo()">
				<view>个人信息修改</view>
				<image class="arrow" src='../../static/imgs/icon_gray_arrow_right.png'></image>
			</view>
			<view class="title-li" @tap="goChangePassword()">
				<view>密码修改</view>
				<image class="arrow" src='../../static/imgs/icon_gray_arrow_right.png'></image>
			</view>
			<!-- <view class="title-li">
				<view>设置</view>
				<image class="arrow" src='../../static/imgs/icon_gray_arrow_right.png'></image>
			</view> -->
		</view>
		
		<button class="cu-btn btn-default btn" @tap="logout()">退出登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: '',
				realName: '',
				tenantName: '',
				postName: '',
			};
		},
		mounted() {
			console.log(getApp().globalData.userData);
			this.avatar = getApp().globalData.userData.avatar;
			this.realName = getApp().globalData.userData.realName;
			this.tenantName = getApp().globalData.userData.tenantName;
			this.postName = getApp().globalData.userData.postName;
		},
		methods: {
			goChangePassword() {
				uni.navigateTo({
					url: './changePassword'
				});
			},
			goChangeUserInfo() {
				uni.navigateTo({
					url: './changeUserInfo'
				});
			},
			logout() {
				let token = getApp().globalData.token;
				uni.request({
					url: getApp().globalData.url + '/blade-auth/oauth/logout',
					header: {
						'blade-auth': "bearer " + token
					},
					method: "get",
					data: {},
					success: (res) => {
						console.log(res);
						if(res.data.msg == "success") {
							getApp().globalData.userData = {};
							getApp().globalData.token = '';
							uni.redirectTo({
								url: '../login/login'
							})
						} else {
							uni.showToast({
								duration: 2000,
								title: '操作失败',
								icon: 'none'
							})
						}
						// let code = res.data.code;
						// if (code == 200) {
						// 	getApp().globalData.userData = {};
						// 	getApp().globalData.token = '';
						// 	uni.redirectTo({
						// 		url: '../login/login'
						// 	})
						// } else {
						// 	uni.showToast({
						// 		duration: 2000,
						// 		title: '操作失败',
						// 		icon: 'none'
						// 	})
						// }
					}
				});
			}
		}
	}
</script>

<style scoped>
	.user-card {
		width: 100%;
		padding: 30rpx;
		background: #fff;
		margin-bottom: 30rpx;
		align-items: center;
	}

	.user-card .head-img {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
	}
	
	.user-card .arrow {
		width: 34rpx;
		height: 56rpx;
	}

 	.user-card .name {
		line-height: 48rpx;
		margin: 10rpx 0 20rpx;
		font-size: 42rpx;
		font-weight: 600;
		color: rgba(63, 71, 86, 1);
	}

	.user-card .company {
		line-height: 36rpx;
		font-size: 28rpx;
		color: rgba(163, 171, 189, 1);
	}

	.title-ul {
		width: 100%;
		background: #fff;
		font-size: 32rpx;
	}

	.title-li {
		width: calc(100% - 60rpx);
		height: 108rpx;
		line-height: 108rpx;
		margin: 0 30rpx;
		border-bottom: 1px solid #e5e5e5;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.title-li:last-child {
		border-bottom: none;
	}

	.title-li .arrow {
		width: 17rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}
	
	.btn {
		width: calc(100% - 60rpx);
		margin: 80rpx 30rpx 0;
	}
</style>
